<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 p-4 md:p-6">
    <!-- 会员信息卡片 -->
    <div class="relative bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-700 rounded-2xl shadow-2xl mb-8 overflow-hidden">
      <!-- 背景装饰 -->
      <div class="absolute inset-0 bg-gradient-to-r from-white/10 to-transparent"></div>
      <div class="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -translate-y-32 translate-x-32"></div>
      <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/5 rounded-full translate-y-24 -translate-x-24"></div>

      <div class="relative p-6 md:p-8">
        <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
          <!-- 用户信息区域 -->
          <div class="flex items-center gap-6">
            <div class="relative group">
              <div class="w-24 h-24 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center overflow-hidden border-2 border-white/30 shadow-lg transition-transform group-hover:scale-105">
              <img
                  :src="userWelfare.avatar || 'src/assets/logo.png'"
                alt="用户头像"
                class="w-full h-full object-cover"
              />
            </div>
              <!-- 会员等级徽章 -->
              <div class="absolute -top-1 -right-1 bg-gradient-to-r from-amber-400 via-yellow-500 to-orange-500 text-white text-xs font-bold px-2 py-1 rounded-lg shadow-xl border border-white/50 backdrop-blur-sm">
                <div class="flex items-center gap-1">
                  <el-icon class="text-xs"><Crown /></el-icon>
                  <span>{{ getMemberLevelText(userWelfare.memberLevel) }}</span>
                </div>
              </div>
            </div>

            <div class="text-white">
              <h2 class="text-2xl md:text-3xl font-bold mb-2">{{userWelfare.username}}</h2>
              <div class="flex items-center gap-2 mb-2">
                <el-icon class="text-blue-200"><Calendar /></el-icon>
                <span class="text-blue-100">会员有效期至：{{ userWelfare.isMember ? userWelfare.activeTime : '还不是会员' }}</span>
              </div>
              <div class="flex items-center gap-4">
                <div class="flex items-center gap-1 bg-white/10 backdrop-blur-sm px-3 py-1 rounded-full">
                  <el-icon class="text-yellow-300"><Coin /></el-icon>
                  <span class="text-yellow-300 font-semibold">{{userWelfare?.userWelfare?.cachedFeatures?.totalCoins}}</span>
                  <span class="text-blue-200 text-sm">积分</span>
            </div>
          </div>
            </div>
          </div>

          <!-- 成长值和操作区域 -->
          <div class="flex flex-col items-start lg:items-end w-full lg:w-auto">
            <!-- 成长值进度 -->
            <div class="w-full lg:w-80 mb-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-blue-100 text-sm">成长值：750/1000</span>
                <span class="text-white text-sm font-medium">距离黑钻会员</span>
        </div>
              <div class="relative w-full bg-white/20 backdrop-blur-sm rounded-full h-3 overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-r from-yellow-300 via-yellow-400 to-orange-500 h-full rounded-full transition-all duration-500 ease-out shadow-sm" style="width: 75%"></div>
                <div class="absolute inset-0 bg-gradient-to-r from-transparent to-white/20 rounded-full"></div>
          </div>
          </div>

            <!-- 操作按钮 -->
            <div class="flex gap-3">
              <button
                class="group flex items-center gap-2 px-6 py-3 bg-white text-blue-700 rounded-xl font-medium hover:bg-blue-50 transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5"
              @click="router.push('/user-clock')"
            >
                <el-icon class="group-hover:scale-110 transition-transform"><EditPen /></el-icon>
                <span>每日签到</span>
            </button>

            <button
              @click="router.push('/product-display')"
                class="group flex items-center gap-2 px-6 py-3 bg-white/10 backdrop-blur-sm text-white border border-white/30 rounded-xl font-medium hover:bg-white/20 transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5"
            >
                <el-icon class="group-hover:scale-110 transition-transform"><Refresh /></el-icon>
              <span>续费会员</span>
            </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 会员权益展示 -->
    <div class="relative bg-gradient-to-br from-white/95 via-indigo-50/90 to-blue-50/90 backdrop-blur-sm rounded-2xl shadow-2xl mb-8 p-6 md:p-8 border border-indigo-100/50 overflow-hidden">
      <!-- 背景装饰 -->
      <div class="absolute inset-0 bg-gradient-to-r from-indigo-500/5 via-transparent to-blue-500/5"></div>
      <div class="absolute top-0 left-0 w-40 h-40 bg-indigo-200/15 rounded-full -translate-y-20 -translate-x-20"></div>
      <div class="absolute bottom-0 right-0 w-28 h-28 bg-blue-200/15 rounded-full translate-y-14 translate-x-14"></div>

      <div class="relative z-10">
        <div class="flex justify-between items-center mb-6">
          <div>
            <h3 class="text-xl font-bold text-gray-800 mb-1">会员特权</h3>
            <p class="text-gray-600 text-sm">享受专属权益，提升使用体验</p>
          </div>
          <button class="group text-blue-600 text-sm flex items-center gap-1 px-4 py-2 rounded-lg hover:bg-blue-50 transition-all duration-200">
          查看全部特权
            <el-icon class="group-hover:translate-x-1 transition-transform"><ArrowRight /></el-icon>
        </button>
      </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <!-- AI 对话特权 -->
          <div v-if="userWelfare?.userWelfare?.cachedFeatures?.features?.chat"
            class="group relative bg-gradient-to-br from-blue-50 to-indigo-100 rounded-2xl p-6 cursor-pointer hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-blue-100"
        >
            <div class="w-14 h-14 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-lg">
              <el-icon class="text-white text-2xl"><ChatDotRound /></el-icon>
            </div>
            <h4 class="text-gray-800 font-bold mb-2">AI 对话无限制</h4>
            <p class="text-gray-600 text-sm mb-4 leading-relaxed">无限次使用高级AI对话模型</p>
            <span class="inline-flex items-center text-xs px-3 py-1 bg-green-100 text-green-700 rounded-full font-medium">
              <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
              可用
            </span>
          </div>

          <!-- AI 绘图特权 -->
        <div v-if="userWelfare?.userWelfare?.cachedFeatures?.features?.drawing"
            class="group relative bg-gradient-to-br from-purple-50 to-pink-100 rounded-2xl p-6 cursor-pointer hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-purple-100"
        >
            <div class="w-14 h-14 rounded-xl bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-lg">
              <el-icon class="text-white text-2xl"><Picture /></el-icon>
            </div>
            <h4 class="text-gray-800 font-bold mb-2">高清 AI 绘图</h4>
            <p class="text-gray-600 text-sm mb-4 leading-relaxed">无限次使用高清AI绘图生成</p>
            <span class="inline-flex items-center text-xs px-3 py-1 bg-blue-100 text-blue-700 rounded-full font-medium">
              免费使用次数：{{userWelfare.userWelfare.cachedFeatures.features.drawing}}
            </span>
          </div>

          <!-- AI 视频特权 -->
          <div v-if="userWelfare?.userWelfare?.cachedFeatures?.features?.video"
            class="group relative bg-gradient-to-br from-emerald-50 to-teal-100 rounded-2xl p-6 cursor-pointer hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-emerald-100"
          >
            <div class="w-14 h-14 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-lg">
              <el-icon class="text-white text-2xl"><VideoPlay /></el-icon>
        </div>
            <h4 class="text-gray-800 font-bold mb-2">AI 视频生成</h4>
            <p class="text-gray-600 text-sm mb-4 leading-relaxed">无限次使用AI视频内容生成</p>
            <span class="inline-flex items-center text-xs px-3 py-1 bg-blue-100 text-blue-700 rounded-full font-medium">
              免费使用次数：{{userWelfare.userWelfare.cachedFeatures.features.video}}
            </span>
          </div>

          <!-- PPT 生成特权 -->
          <div v-if="userWelfare?.userWelfare?.cachedFeatures?.features?.video"
            class="group relative bg-gradient-to-br from-orange-50 to-red-100 rounded-2xl p-6 cursor-pointer hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-orange-100"
          >
            <div class="w-14 h-14 rounded-xl bg-gradient-to-r from-orange-500 to-red-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-lg">
              <el-icon class="text-white text-2xl"><Document /></el-icon>
        </div>
            <h4 class="text-gray-800 font-bold mb-2">PPT 生成</h4>
            <p class="text-gray-600 text-sm mb-4 leading-relaxed">无限次使用PPT内容生成</p>
            <span class="inline-flex items-center text-xs px-3 py-1 bg-green-100 text-green-700 rounded-full font-medium">
              <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
              可用
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 会员专属优惠 -->

    <div class="bg-white  shadow-sm mb-6 p-6">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-medium text-gray-800">我的会员</h3>
        <button @click="router.push('/product-display')"  class="text-blue-600 text-sm flex items-center cursor-pointer whitespace-nowrap">
          更多套餐
          <el-icon class="ml-1"><ArrowRight /></el-icon>
        </button>
      </div>

        <div class="">
          <section class="section-tours" id="section-tours">
            <div class="row" >
              <div class="col-1-of-3" v-for="(item, index) in actives">
                <div class="card" >
                  <div class="card__side card__side--front">
                    <div :class="{
                    'card__picture--1':item.vipPackage.tier == 1,
                     'card__picture--2':item.vipPackage.tier == 2,
                     'card__picture--3':item.vipPackage.tier == 3}"

                         class="card__picture">
                      &nbsp;
                    </div>
                    <h4 class="card__heading">
                  <span :class="{
                    'card__heading-span--1':item.vipPackage.tier == 1,
                     'card__heading-span--2':item.vipPackage.tier == 2,
                     'card__heading-span--3':item.vipPackage.tier == 3}"
                        class="card__heading-span ">{{ item.vipPackage.name }}</span>
                    </h4>
                    <div class="card__details">
                      <ul>
                        <li>开始于 {{item.startTime}}</li>
                        <li>有效至 {{ item.endTime }}</li>
                        <li>有效期 {{item.vipPackage.duration}} 天</li>
                        <li>每日可领取 {{item.vipPackage.dailyCoins}} 积分</li>
                        <li>支付方式 {{item.subscription.paymentMethod}}</li>

                      </ul>
                    </div>
                  </div>
                  <div class="card__side card__side--back card__side--back-1"

                       :class="{
                    'card__side--back-1':item.vipPackage.tier == 1,
                     'card__side--back-2':item.vipPackage.tier == 2,
                     'card__side--back-3':item.vipPackage.tier == 3}">
                    <div class="card__cta">
                      <div class="card__price-box">
                        <p class="card__price-only">Only</p>
                        <p class="card__price-value">￥{{item.vipPackage.currentPrice}}</p>
                      </div>
                      <a @click="router.push('/product-display')" href="#" class="btn btn--white">续购</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>



    </div>


</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import {useRouter} from 'vue-router'
import {
  Search,
  Filter,
  User,
  Lock,
  Bell,
  ChatDotRound,
  Picture,
  VideoPlay,
  Star,
  Coin,
  ShoppingBag,
  Document,
  Collection,
  Upload,
  Plus,
  ShoppingCart,
  ArrowRight,
  Refresh,
EditPen,
  Download,
  Trophy,
  Share,
  Calendar,
} from '@element-plus/icons-vue'
import {getUserWelfare, UserWelfare, getAllActPackage} from "@/api/vip.ts"

onMounted(() => {
  getUserWelfare().then(data => {
    console.log(data)
    userWelfare.value = data;
  })

  getAllActPackage().then(data => {
    console.log(data)
    actives.value = [...data];
  })
})

const actives = ref([])

const userWelfare = ref<UserWelfare>({});

const router = useRouter();


// 积分历史记录
const pointsHistory = ref([
  {
    date: '2025-05-03',
    description: '购买AI对话高级套餐',
    points: 199,
    balance: 8765,
  },
  {
    date: '2025-05-01',
    description: '每日签到奖励',
    points: 10,
    balance: 8566,
  },
  {
    date: '2025-04-28',
    description: '兑换AI绘图次数',
    points: -100,
    balance: 8556,
  },
  {
    date: '2025-04-25',
    description: '邀请好友奖励',
    points: 50,
    balance: 8656,
  },
  {
    date: '2025-04-20',
    description: '购买会员服务',
    points: 999,
    balance: 8606,
  },
])
// 特权使用记录
const privilegeHistory = ref([
  {
    date: '2025-05-04',
    privilege: 'AI对话无限制',
    usage: '使用35次对话',
    status: '成功',
  },
  {
    date: '2025-05-03',
    privilege: '高清AI绘图',
    usage: '生成15张图片',
    status: '成功',
  },
  {
    date: '2025-05-02',
    privilege: 'AI视频生成',
    usage: '生成3个视频',
    status: '成功',
  },
  {
    date: '2025-04-30',
    privilege: '优先下载',
    usage: '下载10个文件',
    status: '成功',
  },
  {
    date: '2025-04-28',
    privilege: 'AI视频生成',
    usage: '生成1个视频',
    status: '处理中',
  },
])
// 等级变更记录
const levelHistory = ref([
  {
    date: '2025-01-15',
    from: '黄金会员',
    to: '钻石会员',
    reason: '成长值达到要求',
  },
  {
    date: '2024-10-08',
    from: '白银会员',
    to: '黄金会员',
    reason: '成长值达到要求',
  },
  {
    date: '2024-06-20',
    from: '普通会员',
    to: '白银会员',
    reason: '购买会员服务',
  },
  {
    date: '2024-03-05',
    from: '未开通',
    to: '普通会员',
    reason: '首次注册',
  },
])

function getMemberLevelText(level) {
  // 会员等级映射
  const levelMap = {
    '1': '普通会员',
    '2': '白银会员',
    '3': '黄金会员',
    '4': '钻石会员',
    '5': '黑钻会员',
    'diamond': '钻石会员',
    'gold': '黄金会员',
    'silver': '白银会员',
    'normal': '普通会员'
  }

  return levelMap[level] || level || '会员'
}
</script>
<style scoped>
.el-pagination {
  --el-pagination-button-bg-color: #fff;
  --el-pagination-hover-color: #409eff;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.el-tabs__item.is-active {
  color: #3b82f6;
}
.el-tabs__active-bar {
  background-color: #3b82f6;
}

.section-tours {
  margin-top: 1rem;
}

.u-center-text {
  text-align: center !important; }

.u-margin-bottom-big {
  margin-bottom: 8rem !important; }

.heading-secondary {
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  background-image: linear-gradient(to right, #7ed56f, #28b485);
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: .2rem;
  transition: all .2s; }

.row {
  max-width: 114rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s; }

.btn--animated {
  animation: moveInBottom .5s ease-out .75s;
  animation-fill-mode: backwards; }

.btn-text:link, .btn-text:visited {
  font-size: 1.6rem;
  color: #55c57a;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid #55c57a;
  padding: 3px;
  transition: all .2s; }

.btn-text:hover {
  background-color: #55c57a;
  color: #fff;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  transform: translateY(-2px); }

.btn-text:active {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transform: translateY(0); }


.row::after {
  content: "";
  display: table;
  clear: both; }
.row [class^="col-"] {
  float: left; }


.row .col-1-of-2 {
  width: calc((100% - 6rem) / 2); }
.row .col-1-of-3 {
  width: calc((100% - 2 * 6rem) / 3);
  margin-bottom: 3rem;
}
.row .col-2-of-3 {
  width: calc(2 * ((100% - 2 * 6rem) / 3) + 6rem); }
.row .col-1-of-4 {
  width: calc((100% - 3 * 6rem) / 4); }
.row .col-2-of-4 {
  width: calc(2 * ((100% - 3 * 6rem) / 4) + 6rem); }
.row .col-3-of-4 {
  width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem); }


.card {
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 37rem; }
.card__side {
  height: 37rem;
  transition: all .8s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
.card__side--front {
  background-color: #fff; }
.card__side--back {
  transform: rotateY(180deg); }
.card__side--back-1 {
  background-image: linear-gradient(to right bottom, #ffb900, #ff7730); }
.card__side--back-2 {
  background-image: linear-gradient(to right bottom, #7ed56f, #28b485); }
.card__side--back-3 {
  background-image: linear-gradient(to right bottom, #2998ff, #5643fa); }
.card:hover .card__side--front {
  transform: rotateY(-180deg); }
.card:hover .card__side--back {
  transform: rotateY(0); }
.card__picture {
  background-size: cover;
  height: 17rem;
  background-blend-mode: screen;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px; }
.card__picture--1 {
  background-image: linear-gradient(to right bottom, #ffb900, #ff7730), url(https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bmF0dXJlfGVufDB8fDB8fHww); }
.card__picture--2 {
  background-image: linear-gradient(to right bottom, #7ed56f, #28b485), url(https://plus.unsplash.com/premium_photo-1673603988651-99f79e4ae7d3?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjd8fG5hdHVyZXxlbnwwfHwwfHx8MA%3D%3D); }
.card__picture--3 {
  background-image: linear-gradient(to right bottom, #2998ff, #5643fa), url(https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDZ8fG5hdHVyZXxlbnwwfHwwfHx8MA%3D%3D); }
.card__heading {
  font-size: 2rem;
  font-weight: 300;
  text-transform: uppercase;
  text-align: right;
  color: #fff;
  position: absolute;
  top: 12rem;
  right: 2rem;
  width: 75%; }
.card__heading-span {
  padding: 1rem 1.5rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; }
.card__heading-span--1 {
  background-image: linear-gradient(to right bottom, rgba(255, 185, 0, 0.85), rgba(255, 119, 48, 0.85)); }
.card__heading-span--2 {
  background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.85), rgba(40, 180, 133, 0.85)); }
.card__heading-span--3 {
  background-image: linear-gradient(to right bottom, rgba(41, 152, 255, 0.85), rgba(86, 67, 250, 0.85)); }
.card__details {
  padding: 1rem; }
.card__details ul {
  list-style: none;
  width: 80%;
  margin: 0 auto; }
.card__details ul li {
  text-align: center;
  color: rgb(119, 119, 119);
  font-size: 1rem;
  padding: 1rem; }
.card__details ul li:not(:last-child) {
  border-bottom: 1px solid #eee; }
.card__cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center; }
.card__price-box {
  text-align: center;
  color: #fff;
  margin-bottom: 8rem; }
.card__price-only {
  font-size: 1.5rem;
  text-transform: uppercase; }
.card__price-value {
  font-size: 4rem;
  font-weight: 100; }
@media only screen and (max-width: 56.25em), only screen and (hover: none) {
  .card {
    height: auto;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
  .card__side {
    height: auto;
    position: relative;
    box-shadow: none; }
  .card__side--back {
    transform: rotateY(0);
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%); }
  .card:hover .card__side--front {
    transform: rotateY(0); }
  .card__details {
    padding: 1rem 3rem; }
  .card__cta {
    position: relative;
    top: 0%;
    left: 0;
    transform: translate(0);
    width: 100%;
    padding: 7rem 4rem 4rem 4rem; }
  .card__price-box {
    margin-bottom: 3rem; }
  .card__price-value {
    font-size: 3rem; } }

.btn, .btn:link, .btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  display: inline-block;
  border-radius: 10rem;
  transition: all .2s;
  position: relative;
  font-size: 1.6rem;
  border: none;
  cursor: pointer; }

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0; }

.btn:active, .btn:focus {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }

.btn--white {
  background-color: #fff;
  color: #777; }
.btn--white::after {
  background-color: #fff; }
</style>
